<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>VR世界景点</title>
    <!-- 引入css文件 -->
    <!-- 引入字体图标样式文件 -->
    <link rel="stylesheet" href="./icomoon/style.css" />
    <!-- 引入初始化样式文件 -->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 引入首页样式文件 -->
    <link rel="stylesheet" href="./css/index.css" />
	<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">    
    <script src="./js/flexible.js"></script>
	<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
  </head>

  <body>
    <!-- 1.0 头部 -->
    <div class="header">
      <a class="logo" href="index.html">vr</a>
      <div class="search-box">
        <input
          class="search"
          type="search"
          name=""
          id=""
          placeholder="搜索目的地、游记攻略等"
        />
        <i class="icon-search"></i>
      </div>
      <div class="user-pic">
        <img src="./images/user.jpg" alt="" />
      </div>
    </div>
    <!-- 2.0 焦点图 -->

    <div class="banner" style="position: relative;display: flex;justify-content: center;align-items: center;">
		<div style="color: #fff;">VR世界景点</div>
	</div>
    <!-- 3.0 导航 -->
    <div class="nav">
      <a class="nav-item" href="#">
        <img src="./images/北京 (5).png" alt="" />
        <p>北京</p>
      </a>
      <a class="nav-item" href="#">
        <img src="./images/成都 (5).png" alt="" />
        <p>成都</p>
      </a>
      <a class="nav-item" href="#">
        <img src="./images/杭州 (5).png" alt="" />
        <p>杭州</p>
      </a>
      <a class="nav-item" href="#">
        <img src="./images/丽江 (5).png" alt="" />
        <p>丽江</p>
      </a>
      <a class="nav-item" href="#">
        <img src="./images/青岛 (5).png" alt="" />
        <p>青岛</p>
      </a>
      <a class="nav-item" href="#">
        <img src="./images/上海 (5).png" alt="" />
        <p>上海</p>
      </a>
      <a class="nav-item" href="#">
        <img src="./images/深圳 (5).png" alt="" />
        <p>酒店</p>
      </a>
      <a class="nav-item" href="#">
        <img src="./images/香港 (5).png" alt="" />
        <p>香港</p>
      </a>
      <!-- <a class="nav-item" href="#">
        <img src="./images/北京 (5).png" alt="" />
        <p>约伴</p>
      </a>
      <a class="nav-item" href="#">
        <img src="./images/北京 (5).png" alt="" />
        <p>专栏</p>
      </a> -->
    </div>
    <!-- 4.0 精选攻略 -->
    <div class="choiceness">
      <!-- 4.1 精选攻略-头部 -->
      <div class="choiceness-head">
        <h2>精选攻略</h2>
        <!-- <a class="safety-tips" href="#"
          ><i class="icon-information-solid"></i>
          <p>出境安全提示</p>
          <i class="icon-cheveron-right"></i
        ></a> -->
      </div>
      <!-- 4.2 精选攻略-主体 -->
      <div class="choiceness-body">
        <a class="choiceness-body-item" href="#">
          <img src="./images/2.png" alt="" />
          <h3>远在天边看家乡实景<br /></h3>
          <div>
            <p></p>
            <span><i class="icon-heart"></i>603</span>
          </div>
        </a>
        <a class="choiceness-body-item" href="#">
          <img src="./images/1.png" alt="" />
          <h3>身临其境720度观赏<br /></h3>
          <div>
            <p></p>
            <span><i class="icon-heart"></i>603</span>
          </div>
        </a>
        <a class="choiceness-body-item" href="#">
          <img src="./images/4.png" alt="" />
          <h3>真人自动解说景点<br /></h3>
          <div>
            <p></p>
            <span><i class="icon-heart"></i>603</span>
          </div>
        </a>
        <a class="choiceness-body-item" href="#">
          <img src="./images/3.png" alt="" />
          <h3>足不出户游世界风景名胜<br /></h3>
          <div>
            <p></p>
            <span><i class="icon-heart"></i>603</span>
          </div>
        </a>
      </div>
    </div>
	<!-- <div style="height: 10px;background-color: #c8c8c8;width: 100%;margin: 0 auto;"></div> -->
	<div class="foot">
		苏ICP备xxxxxxx号
	</div>
  </body>
</html>
<style type="text/css">
	.swiper {
	    /* width: 600px; */
	    height: 300px;
	}  
	.nav-item{
		width: 21%;
		height: 90px;
	}
	.nav-item img{
		height: 100%;
	}
	/* .nav:after{
		display: block;
		content: '';
		width: 32%;
		height: 0;
	} */
</style>
<script type="text/javascript">
	var mySwiper = new Swiper ('.swiper', {
	    direction: 'vertical', // 垂直切换选项
	    loop: true, // 循环模式选项
	    
	    // 如果需要分页器
	    pagination: {
	      el: '.swiper-pagination',
	    },
	    
	    // 如果需要前进后退按钮
	    navigation: {
	      nextEl: '.swiper-button-next',
	      prevEl: '.swiper-button-prev',
	    },
	    
	    // 如果需要滚动条
	    scrollbar: {
	      el: '.swiper-scrollbar',
	    },
	  })        
</script>
<style type="text/css">
	.foot{
		padding: 30px 10px;
		text-align: center;
		font-size: 14px;
		background-color: #d8d8d8;
		color: #000;
	}
</style>